@import "common";

@orange : #e86c4f;

html{width: auto;margin: 0;}
body{height: auto;background-color: #f3f3f3;}
#body{position: relative;z-index: 1;padding-top: 160px;background: url('/src/img/list/bg-2.jpg') center bottom no-repeat;}

.body-bg{
    position: absolute;top: 0;left: 0;bottom: 0;width: 100%;min-width: @content;
    li{
        width: 100%;background: center top / cover no-repeat;
        &.bg-1{height: 960px;background-image: url('/src/img/list/bg-1.jpg');}
    }
}

.footer{
    height: 330px;position: relative;
    p{position: absolute;bottom: 80px;width: 100%;text-align: center;font-size: 16px;color: #999;line-height: 40px;}
}

h1{
    height: 95px;background: url("/src/img/user/winner-title.png") center top / auto 66px no-repeat;text-indent: -9999px;
    &.true{background-image: url("/src/img/winner/title.png")}
}

.list-box{
    background-color: rgba(255,255,255,0.75);margin-top: 35px;box-sizing: border-box;padding: 0 0 70px;
    h2{font-size: 24px;text-align: center;line-height: 90px;border-bottom: 1px solid #e4cdcb;margin: 0 30px;}
    .lists{
        overflow: hidden;
        li{
            float: left;width: 250px;height: 495px;border-radius: 8px;background-color: #fff;margin-left: 112px;margin-top: 44px;overflow: hidden;background-color: #eee9e9;text-align: center;position: relative;
            .head{display: block;height: 349px;background-color: #eee;background: center center / cover no-repeat;cursor: pointer;}
            .name{margin-top: 20px;font-size: 18px;}
            .disc{margin-top: 10px;font-size: 14px;color: #999;}
            .option{
                position: absolute;bottom: 0;left: 0;right: 0;height: 48px;border-top: 1px solid #f3f0f0;
                div{width: 100%;float: left;color: @orange;line-height: 48px;font-size: 14px;
                    //&:last-child{background-color: @orange;color: #fff;cursor: pointer;}
                    b{font-size: 18px;}
                }
            }
        }
    }
}

.important{margin-top: 40px;color: #a9a9a9;padding: 0 0 0 100px;line-height: 22px;}
.to-author{display: block;width: 180px;height: 65px;margin: 20px auto 0;background: url("/src/img/author/btn.png") center / contain no-repeat;}

//手机端
@media (max-width: @sreen){
    html,body{width: 100%;}
    .content{width: 100%;}
    #body{padding-top: 160/@rem;background-image:  url('/src/img/list/bg-2-s.jpg');background-position: center bottom -300/@rem;}

    //悬浮
    .fixed-box{
        position: fixed;width: 120/@rem;right: 0;top: 20%;height: 250/@rem;margin-top: 0;
        a{
            width: 100%;height: 120/@rem;background-size: contain;
            &.img-way{margin-top: 10/@rem;}
        }
    }

    nav{
        position: fixed;height: 100/@rem;padding: 15/@rem;min-width: 100%;background-color: #fff;
        .logo{width: 310/@rem;height:70/@rem;background: url("/src/img/logo-1.png") center center / contain no-repeat;}
        .list{display: none;}
        &.scroll{
            position: fixed;box-shadow: none;padding: 15/@rem;height: 100/@rem;
            .logo{width: 310/@rem;height:70/@rem;background-image: url("/src/img/logo-1.png");margin: 0;}
        }
    }

    .body-bg{
        min-width: 100%;padding-top: 100/@rem;
        li{
            &.bg-1{height: 1040/@rem;background-image: url('/src/img/list/bg-1-s.jpg');}
        }
    }

    &.footer{height:330/@rem;
        p{bottom: 40/@rem;font-size: 16/@rem;line-height: 40/@rem;
            span{display: block;}
        }
    }

    h1{
        height: 95/@rem;background-size: auto 54/@rem;position: relative;
        .title-type{display: block;position: absolute;width: 100%;top: 130%;font-size: 32/@rem;text-indent: 0;text-align: center;}
    }

    .list-box{
        margin-top: 30/@rem;padding-bottom: 50/@rem;
        h2{font-size: 30/@rem;line-height: 90/@rem;margin: 0 30/@rem;}
        .lists{
            li{
                width: 250/@rem;height: 495/@rem;margin-left: 46/@rem;margin-top: 46/@rem;
                &:first-child{float: none;margin-left: 195/@rem;}
                .head{height: 349/@rem;}
                .name{margin-top: 20/@rem;font-size: 18/@rem;}
                .disc{margin-top: 10/@rem;font-size: 14/@rem;}
                .option{
                    height: 48/@rem;border-top-width: .5px;
                    div{line-height: 48/@rem;font-size: 14/@rem;
                        b{font-size: 18/@rem;}
                    }
                }
            }
        }
    }

    .important{margin-top: 20px;padding: 0 20px;}
    .to-author{width: 200/@rem;height: 65/@rem;margin-top: 20/@rem;}
}








